關於 Universal Rendering

前一篇提到，原本前後端的 View 各自分開
隨著前端漸漸吃重，為了讓畫面邏輯不需要分散各處，有人提出新的架構 - Isomorphic JavaScript
讓權責更集中在 JavaScript，同時找人時的技術線單純些。

Isomorphic JavaScript 沒漂亮解決問題

畫面邏輯已經統一用 JavaScript 寫了，但前端與 SSR 仍分開實作
即使邏輯相同，不代表得維護兩份採不同語法的實作呢？

接著有更進一步的定義 - Universal JavaScript

Universal JavaScript

Wiki 定義其為別稱，但架構有段差距，沿用參考文章講解差異

Isomorphic JavaScript vs. Universal JavaScript

When coining the term Isomorphic JavaScript, Robbins explains that he meant “that any given line of code (with notable exceptions) can execute both on the client and the server”. However, if we examine more closely the meaning of the word isomorphic we read “corresponding or similar in form and relations”. In other words, two entities that are not the same but only look the same. This would be a great word to use when describing the relationship between jQuery and Zepto or Underscore and lodash, for example. These libraries are similar in form (they share the same API) but differ in underlying ideas and philosophy.

Instead, what we need is a word that describes the same code but running in a different environment. Nowadays we run JavaScript code not only on servers and in browsers, but on mobile and embedded devices as well. We’re running it on Raspberry Pis and Wii Us and iPhones. But this is a purely technical argument. What’s even more important is conveying understanding.

https://cdb.reacttraining.com/universal-javascript-4761051b7ae9

更進一步的定義

TL;DR: Isomorphism is the functional aspect of seamlessly switching between client- and server-side rendering without losing state. Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments.

https://medium.com/@ghengeveld/isomorphism-vs-universal-javascript-4b47fb481beb

Isomorphism 用於專案程式碼中有多種實作，針對不同環境(也就 Browser 和 Server)執行

而 Universal 則是講同一份實作，可以跑在不同環境上

換句話說，究竟 View Rendering 的定義是不是同一份程式碼，決定 App 屬於 Isomorphism 還是 Universal

顯然 Universal Application 的維護單純多了

Nuxt.js 的架構

圖源

上圖是 EvanYou 的 Vue SSR 案例，仿造 Hacker News

Nuxt 雷同，於是我借這張圖一用 (手繪圖比較草，重繪後貼上)

同一份頁面實作，可以選擇採 SSR，或作為 SPA 的頁面元件
加上寫 Vue.js 語法，頗棒。

看完以上，再回去讀Nuxt官網簡介，名詞含義就更有感了

(React 麻煩右轉往 Next.js)

首先 Nuxt 用了這些套件

• Vue 2
• Vue-Router 管理路由
• Vuex 管理全域狀態
• Vue-Meta 產生 <meta>
• 使用 Webpack 編譯，加上寫 vue.js 需要的 loader

造就他幫你省了工

• 寫 Vue File 就好，簡單

• 幫你做代碼分離

• 幫你做 SSR

• 路由幫你處理掉非同步資料抓取

• 也可以當成靜態站

• 幫你做 ES6/ES7 轉譯

• 打包並最小化 JS & CSS

• 幫你生 Head Meta

• 本地開發熱加載

• 支援 ESLint

• 樣式語法支援 SASS、LESS、 Stylus

• 支援 HTTP/2 headers

• 已留模組架構，供你自行擴充

特別 Nuxt Module，實在太方便了，錯過可惜。